<template>
    <el-container class="container">
        <div class="container_div">
            <el-aside :class="[show==true?'container_aside':'container_asidetwo']">
                <div class="left_content">
                    <span class="left_content_name">{{ form.name }}</span>
                    <div class="left_content_itemBgColor" v-for="item in meData" @click="meDataclick(item)">
                        <div :class="[meTabTitle == item.title?'left_content_item_headerChoose':'left_content_item_header']">
                            <i :class="item.icon" class="iconfont left_content_item_header_icon"></i>
                        </div>
                        <span :class="[meTabTitle == item.title?'left_content_item_titleChoose':'left_content_item_title']">{{
                item.title
              }}</span>
                    </div>
                </div>
            </el-aside>
            <div :class="[show==false?'container_aside_rightTwo':'container_aside_right']" @mouseenter="changmouseenter" @mouseleave=mouseleavechang>
                <div class="container_aside_right_text" v-if="!show" @click="projectclick">{{ form.name }}</div>
                <div class="narrow" @click="show = !show" v-show="asideright==true" v-if="show">
                    <a style="width: 100%">
                        <div class="left_css">
                            <i :class="[show ?'el-icon-caret-left':'el-icon-caret-right']"></i>
                        </div>
                    </a>
                </div>
            </div>
        </div>
        <div class="right_content">
            <component :key="timer" :is="meComponents" :docSubtype='listQuery.docSubtype' :form='form' :prodForm='prodForm' @resetForm='resetForm'></component>
        </div>
    </el-container>
</template>
<script>
import pagination from "@/components/Pagination";
import { list, save } from "@/api/doc.js";
import { queryById } from "@/api/prod.js";
import production from "./components/production";
import management from "./components/management";
import material from "./components/material";
import productdoc from "./components/productdoc";
import release from "./components/releaseList";
import singlefileUpload from "@/components/upload/singlefileUpload";

export default {
    name: "produceDetails",
    components: {
        production,
        management,
        material,
        singlefileUpload,
        pagination,
        release,
        productdoc,
    },
    data() {
        return {
            prodForm: [],
            form: {},
            selectype: true,
            documentType: "",
            show: true,
            meTabTitle: "产品概况",
            meComponents: "production",
            asideright: false,
            meData: [
                {
                    icon: "icon-gailan1",
                    title: "产品概况",
                    component: "production",
                    value: null,
                },
                {
                    icon: "icon-wuliaoguanli",
                    title: "核心物料管理",
                    component: "material",
                    value: null,
                },
                {
                    icon: "icon-guanli",
                    title: "样机生产与试制",
                    component: "management",
                    value: "00",
                },
                {
                    icon: "icon-iconku-",
                    title: "产品交接",
                    component: "productdoc",
                    value: "02",
                },
                {
                    icon: "icon-ziliao",
                    title: "产品资料",
                    component: "productdoc",
                    value: "01",
                },
                {
                    icon: "icon-icon-yonghuxiangmuquanxian",
                    title: "用户项目",
                    component: "productdoc",
                    value: "03",
                },
                {
                    icon: "icon-fabu-",
                    title: "产品发布",
                    component: "release",
                    value: null,
                },
            ],
            listQuery: {
                current: 1,
                size: 10,
                docType: "02",
                deleted: 0,
                isUpdate: 0,
                isMyCreate: 0,
                name: "",
                docSubtype: "",
                docTypeId: "",
            },
            timer:null
        };
    },
    created() {
        this.listQuery.docTypeId = this.$route.query.prodId;
        this.queryByIdclic();
    },
    watch: {
        $route(newval, oldval) {
            this.loadList();
        },
    },
    methods: {
        resetForm(data) {
            this.meComponents = data;
            //  this.meTabTitle=item
        },
        async queryByIdclic() {
            let params = new URLSearchParams();
            params.append("id", this.$route.query.prodId);
            let res = await queryById(params, false);
            this.form = res.data;
        },
        //  	uploadSave(val){
        // 	let data = {
        //     docFilePath:[{fileNmae:val.name,fileUrl:val.url}],
        //     name:val.name,
        // 		docType:'02',
        // 		dirId:this.form.dirId,
        // 		docTypeId:this.$route.query.prodId,
        // 		status:'00',
        //     docSubtype:this.listQuery.docSubtype
        // 	}
        // 	save(data).then(res=>{
        // 		console.log(data)
        // 		this.prodForm.push(res.data)
        //     this.$refs.upload.sucessClick()
        // 	})
        // },
        loadList() {
            var _this = this;
            list(_this.listQuery).then((res) => {
                _this.prodForm = res.data.docData;
                _this.total = res.data.docData.length;
            });
        },
        projectclick() {
            this.show = true;
        },
        mouseleavechang() {
            this.asideright = false;
        },
        changmouseenter() {
            this.asideright = true;
        },
        meDataclick(data) {
            if (data.value != null) {
                this.listQuery.docSubtype = data.value;
            }
            if (this.listQuery.docSubtype == "00") {
                this.loadList();
            }

            this.meTabTitle = data.title;
            this.meComponents = data.component;
            this.timer=new Date().getTime()
        },
    },
};
</script>
<style scoped>
.container {
    /* height: 88vh; */
}

.container_div {
    display: flex;
    height: calc(100vh - 84px);
}

.container_aside_right {
    width: 30px;
    position: relative;
}

.container_aside_rightTwo {
    /* width: 30px; */
    position: relative;
    border-right: solid 1px rgb(229, 236, 240);
}

.container_aside {
    width: 220px !important;
    height: 100vh;
    background-color: #ffffff;
    box-shadow: 0 0 12px 2px rgb(0 0 0 / 12%);
    transition: all 0.5s;
    overflow: hidden;
}

.container_asidetwo {
    width: 3px !important;
    height: 100vh;
    background-color: #ffffff;
    overflow: hidden;
    transition: all 0.5s;
}

.left_content {
    width: 220px;
    height: 100vh;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    padding-top: 24px;
    padding-left: 32px;
    padding-bottom: 20px;
    overflow-y: hidden;
    transition: all 0.5s;
}

.left_content_name {
    font-size: 20px;
    color: rgb(46, 64, 94);
    font-weight: 700;
    line-height: 28px;
}

.left_content_itemBgColor {
    height: 50px;
    display: flex;
    align-items: center;
    cursor: pointer;
}

.left_content_itemBgColorChoose {
    height: 50px;
    display: flex;
    align-items: center;
    cursor: pointer;
    color: rgb(44, 126, 248);
}

.left_content_item_title {
    font-size: 13px;
    font-weight: 500;
    margin-left: 10px;
}

.left_content_item_titleChoose {
    font-size: 13px;
    font-weight: 500;
    margin-left: 10px;
    color: rgb(44, 126, 248);
}

.left_content_item_headerChoose {
    color: rgb(44, 126, 248);
    font-size: 13px;
    font-weight: 500;
}

.left_content_item_header_icon {
    font-size: 18px;
}

.narrow {
    cursor: pointer;
    position: absolute;
    top: 40%;
    right: 20px;
    z-index: 50;
    display: flex;
    align-items: center;
}

.left_css {
    width: 10px;
    height: 50px;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    background-color: #999999;
}

.container_aside_right_text {
    cursor: pointer;
    word-wrap: break-word;
    font-size: 14px;
    color: #909aaa;
    margin-top: 15px;
    margin-left: 2px;
    line-height: 35px;
    writing-mode: tb-rl;
    min-height: 100px;
}

.right_content {
    flex: 1;
    padding-top: 24px;
    padding-right: 14px;
    padding-left: 8px;
    height: calc(100vh - 84px);
    overflow-y: auto;
}

.right_contentTwo {
    flex: 1;
    overflow-y: auto;
}

.right_content {
    /* margin-left: 250px; */
    flex: 1;
}

.document-right-header {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: end;
    margin-bottom: 15px;
}

.document-right-header-left {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.document-right-header-left-select {
    width: 160px;
    margin-right: 10px;
}

.document-right-header-left-input {
    width: 220px;
}

.document-right-header-right {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.document-right-header-right-switch {
    width: 72px;
    height: 36px;
    display: flex;
    flex-direction: row;
    align-items: center;
    overflow: hidden;
    box-sizing: border-box;
    margin-right: 20px;
}

.document-right-header-right-switch-item {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 36px;
    height: 36px;
    border: 1px solid #dadee3;
    border-right: none;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}

.document-right-header-right-switch-itemTwo {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 36px;
    height: 36px;
    border: 1px solid #dadee3;
    border-left: none;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}

.switch-bg {
    background-color: #677e9f;
    border-color: #677e9f;
}

.switch-color {
    color: #677e9f !important;
}

.document-right-header-right-switch-item-title {
    font-size: 14px;
    color: white;
}

.popover-content-top-title {
    color: #fff;
    font-size: 14px;
    display: block;
    width: 100%;
    padding: 10px 20px;
    font-size: 14px;
    border-radius: 4px;
    cursor: pointer;
    background-color: #409eff;
}
</style>
